<template>
  <div class="loginPage">
    <div class="loginBox">
      <img class="loginTitle" src="../../assets/login_title.png" alt="" />
      <div class="title">智慧实训室管控一体化平台</div>
      <div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
          <el-form-item label="" prop="username">
            <el-input v-model="ruleForm.username" placeholder="请输入账号">
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" autocomplete="off">
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="">
            <el-checkbox style="color: white" label="记住密码" name="type" v-model="ruleForm.type"></el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="btn" @click="submitForm('ruleForm')">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from 'js-md5'
import { login, getUserRoleMenus } from '@/api/system'
export default {
  data() {
    return {
      ruleForm: {
        username: '',
        password: '',
        type: false
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    let username = window.localStorage.getItem('username')
    let password = window.localStorage.getItem('password')
    let type = window.localStorage.getItem('type')
    if (username && password) {
      this.ruleForm.username = username
      this.ruleForm.password = password
      this.ruleForm.type = type == 'true' ? true : false
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let password = md5(md5(this.ruleForm.password) + 'bby')
          login({
            password: password,
            username: this.ruleForm.username
          }).then((res) => {
            if (this.ruleForm.type == true) {
              window.localStorage.setItem('password', this.ruleForm.password)
              window.localStorage.setItem('type', 'true')
            } else {
              window.localStorage.removeItem('password')
              window.localStorage.removeItem('type')
            }

            window.localStorage.setItem('username', this.ruleForm.username)
            window.localStorage.setItem('token', res.data.token)
            window.localStorage.setItem('roleId', res.data.roleId)
            window.localStorage.setItem('userType', res.data.userType)
            window.localStorage.setItem('examinationRoomId', res.data.examinationRoomId)
            if (this.$route.query && this.$route.query.redirect) {
              this.$router.push({
                path: this.$route.query.redirect
              })
            } else {
              // 获取用户权限
              this.getAuthority()
            }
          })
        }
      })
    },
    // 获取用户权限
    getAuthority() {
      getUserRoleMenus().then((res) => {
        if (res.code == 200) {
          let datas = res.data
          let arr = []
          for (let i of datas) {
            if (i.isCheck == 1) {
              arr.push(i.code)
            }
            for (let j of i.nextMenus) {
              if (j.isCheck == 1) {
                arr.push(j.code)
              }
              for (let k of j.nextMenus) {
                if (k.isCheck == 1) {
                  arr.push(k.code)
                }
              }
            }
          }
          // 缓存权限数组
          window.localStorage.setItem('permissionsArr', JSON.stringify(arr))
          // 延迟跳转首页
          setTimeout(() => {
            this.$router.push({
              path: `/personLocation/locationMap`
            })
          }, 500)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="less" scoped>
.loginPage {
  background-image: url('../../assets/login_bg.png');
  background-size: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  width: 800px;
  height: 364px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.logo {
  width: 36%;
  height: 100%;
  background: #fff;
  line-height: 324px;
}

.logo img {
  width: 200px;
}

.loginBox {
  width: 495px;
  height: 563px;
  background-image: url('../../assets/login_bottom.png');
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 800px;
  align-items: center;
}

.title {
  font-size: 22px;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
  opacity: 0.88;
}

.demo-ruleForm {
  margin-bottom: 50px;
  .el-input {
    width: 392px;
    height: 40px;
    border: 2px solid #2756d5 !important;
    border-radius: 4px !important;
    color: white !important;
    background-color: #2439d0 !important;
  }
}

.btn {
  width: 100%;
}

.loginTitle {
  width: 336px;
  height: 30px;
  margin-top: 50px;
}
</style>